<template>
	<view>
		<view class="order-item">
			<image class="order-img" src="/static/index/good-1.png" mode=""></image>
			<view class="order-right">
				<view class="order-right-top">订单编号：2536475862</view>
				<view class="order-right-bottom">订单编号：2536475862</view>
				<view class="order-right-bottom">物流单号：12311111114</view>
			</view>
		</view>
		<view class="order-msg">
			<view class="wrap-centent-title">
				<view class="wrap-centent-border"></view>
				<view class="wrap-centent-name">物流详情</view>
			</view>
			<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colors: "#287E34",
				stepData: [{
						name: '订单已签收，期待再次为您服务',
						time: '2019-06-06  12:15:45',
						isNow: 1,
						type: 1
					},
					{
						name: '到达目的地网点河南郑州公司，快件将为您配送',
						time: '2019-06-06  12:15:45',
						isNow: 0,
						type: 1
					},
					{
						name: '在河南郑州公司进行发出扫描',
						time: '2023-06-09 20:13:49',
						isNow: 0,
						type: 1
					},
					{
						name: '订单付款成功',
						time: '2019-06-06  12:15:45',
						isNow: 0,
						type: 1
					},
					{
						name: '订单已提交，等待付款',
						time: '2023-06-10 18:54:55',
						isNow: 0,
						type: 1
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
	}

	.order-item {
		padding: 20rpx;
		display: flex;
		background-color: #fff;

		.order-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 20rpx;
		}

		.order-right {
			margin: 20rpx 0 0 20rpx;

			.order-right-top {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.order-right-bottom {
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				margin-top: 20rpx;
			}
		}
	}

	.order-msg {
		background: #FFFFFF;
		border-radius: 16px 16px 16px 16px;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx;

		.wrap-centent-title {
			display: flex;
			margin-bottom: 30rpx;

			.wrap-centent-border {
				width: 8rpx;
				height: 28rpx;
				background: #287E34;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-top: 10rpx;
			}

			.wrap-centent-name {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
				margin-left: 27rpx;
			}
		}
	}
</style>